<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="/static/css/bootstrap.min.css" rel="stylesheet">
		<link href="/static/css/font-awesome.css" rel="stylesheet">
		<link href="/static/css/datatables.min.css" rel="stylesheet">
		<link href="/static/css/animate.css" rel="stylesheet">
		<link href="/static/css/style.css" rel="stylesheet">
		<script src="/static/js/jquery-3.1.1.min.js"></script>
		<script src="/static/js/bootstrap.min.js"></script>
	</head>
	<body style="background-color:whitesmoke">
		<div class="row wrapper border-bottom white-bg page-heading">
			<div class="col-lg-10">
				<h2>数据表格</h2>
				<ol class="breadcrumb">
					<li>
						<a href="index.html">主页</a>
					</li>
					<li>
						<a>表格</a>
					</li>
					<li class="active">
						<strong>数据表格</strong>
					</li>
				</ol>
			</div>
		</div>

		<div class="wrapper wrapper-content animated fadeInRight">

			<div class="ibox-content m-b-sm border-bottom">
				<div class="row">
					<form role="form" class="form-horizontal">
						<div class="form-group">
							<label class=" col-sm-2 control-label">姓名</label>
							<div class=" col-sm-2">
								<input type="text" class="form-control" id="name" placeholder="请输入姓名">
							</div>
							<label class=" col-sm-2 control-label">姓名</label>
							<div class=" col-sm-2">
								<input type="text" class="form-control" id="name" placeholder="请输入姓名">
							</div>
							<div>
								<button class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-zoom-in"></span> 查询</button>
								<button class="btn btn-primary btn-sm" type="button" onclick="add()"><span class="glyphicon glyphicon-plus"></span> 新增</button>
							</div>
						</div>
					</form>

				</div>

			</div>
			<div class="row">
				<div class="col-lg-12">

					<div class="ibox float-e-margins">

						<div class="ibox-content">

							<table class="footable table table-stripped toggle-arrow-tiny" data-page-size="15">
								<thead>
									<tr>

										<th data-toggle="true">产品名称</th>
										<th data-hide="phone">产品型号</th>
										<th data-hide="all">产品产品描述</th>
										<th data-hide="phone">产品价格</th>
										<th data-hide="phone,tablet">产品数量</th>

										<th class="text-right" data-sort-ignore="true">产品操作</th>

									</tr>
								</thead>
								<tbody>
									<tr>
										<td>
											示例产品 1
										</td>
										<td>
											型号 1
										</td>
										<td>
											乐高拼砌玩具曾经伴随无数多孩子的成长，在孩子和家长的心目中，乐高代表的是快乐，是无限的想象，是创意的未来。
										</td>
										<td>
											$50.00
										</td>
										<td>
											1000
										</td>

										<td class="text-right">

											<button class="btn-primary btn btn-sm" onclick="add()"><span class="glyphicon glyphicon-tag"></span> 编辑</button>
											<button class="btn-primary btn btn-sm"><span class="glyphicon glyphicon-trash"></span> 删除</button>
										</td>
									</tr>
								</tbody>
							</table>

						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 模态框开始 -->
		<div id="one" class="modal fade" style="top:200px">
			<div class="modal-dialog">

				<div class="modal-content">
					<!--头部-->
					<div class="modal-header">
						<h4 align="center">用户修改</h2>

					</div>
					<!--主题内容-->
					<div class="modal-body">
						<form role="form" class="form-horizontal">
							<div class="form-group">
								<label class=" col-sm-2 control-label">姓名</label>
								<div class=" col-sm-10">
									<input type="text" class="form-control" id="name" placeholder="请输入姓名">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2  control-label">学历</label>
								<div class=" col-sm-10">
									<select class="form-control" id="s">
										<option>本科</option>
										<option>专科</option>
									</select>
								</div>
							</div>
						</form>
					</div>

					<!--底部-->
					<div class="modal-footer">
						<button class="btn btn-primary btn-sm" type="button" onclick="closeWin()"><span class="glyphicon glyphicon-remove"></span>关闭</button>
						<button class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-save"></span>保存</button>
					</div>

				</div>
			</div>
		</div>
	</body>

	<script>
		//显示模态框
		function add() {
			$("#one").modal("show")
		}
		//关闭模态框
		function closeWin() {
			$("#one").modal("hide")
		}
	</script>
</html>
